<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table>
			<tbody id="itemTable">
				
			</tbody>
		</table>
	</body>
	<script type="text/javascript">
		/* 原生js添加节点的方法与jQuery 添加 和 移除 节点的方法 */
		/* 原生js
		 1.appendChild()
		 eg:var tableObj = document.getElementById("Id");
			var trObj = document.creatElement("tr");
			tableObj.appendChild(trObj);
		 2.insertBefore()//此方法的调用输入父级Dom节点的调用
		 eg:var tableObj = document.getElementById("tableId");
			var itemTrObj = document.getElementById("itemTrid");
			var trObj = document.creatElement("tr");
			tableObj.insertBefore(trObj,itemTrObj);//将新节点trObj插入到指定节点itemTrObj的前边
		 3.removeChild(n)//删除节点
		 eg:var tableObj = document.getElementById("Id");
			var itemTrObj = document.getElementById("itemTrid");
			tableObj.removeChild(itemTrObj);
		 4.replaceChild(k,n)//替换节点
		 eg:var tableObj = document.getElementById("tableId");
			var itemTrObj = document.getElementById("itemTrid");
			var trObj = document.creatElement("tr");
			tableObj.replaceChild(itemTrObj,trObj);//用节点trObj替代掉itemTrObj
		 5.cloneChild()//赋值该节点，返回值为赋值后的节点
		 eg:var tableObj = document.getElementById("tableId");
			tableObj.cloneChild();
			//参数为 true 时，则将tableObj的后代元素也一并复制。否则仅复制tableObj元素本身。
		 */
		/* jQuery
		 1.before(),insertBefore()
			$('#span2').before( $('#b2') );//在span2的前面添加b2
			$('#b2').insertBefore( $('#span2') );//将b2插入到span2的前面
		 2.after(),insertAfter()
			$('#span2').after( $('#b2') );//在span2的后面添加b2
			$('#b2').insertAfter( $('#span2') );//将b2插入到span2的后面
		 3.prepend(),prependTo()
			$('#div2').prepend( $('#b2') );//在div2里面的最前面添加b2
			$('#b2').prependTo( $('#div2') );//将b2添加到div2里面的最前面
		 4.append(),appendTo()
			$('#div2').append( $('#b2') );//在div2里面的最后面添加b2
			$('#b2').appendTo( $('#div2') );//把b2添加到div2里面的最后面
		 */
		"use strict"
		var str = '[{EVENT_CLASS: "1", NAME_LOCAL: "卡箱故障", WORKTIME: 0.07, NUM: 1, AVGDEALTIME: 0.07},'
				+ '{EVENT_CLASS: "1", NAME_LOCAL: "发卡器故障", WORKTIME: 0.07, NUM: 1, AVGDEALTIME: 0.07},'
				+ '{EVENT_CLASS: "1", NAME_LOCAL: "吞卡箱故障", WORKTIME: 0.57, NUM: 3, AVGDEALTIME: 0.19},'
				+ '{EVENT_CLASS: "2", NAME_LOCAL: "入钞门故障", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "2", NAME_LOCAL: "取款机芯故障", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "2", NAME_LOCAL: "纸币钞箱总状态故障", WORKTIME: 0.49, NUM: 2, AVGDEALTIME: 0.25},'
				+ '{EVENT_CLASS: "2", NAME_LOCAL: "纸币钞箱部分服务", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "3", NAME_LOCAL: "二合一身份证读卡器故障", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "3", NAME_LOCAL: "人脸识别摄像头故障", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "3", NAME_LOCAL: "凭条打印机故障", WORKTIME: 0.12, NUM: 1, AVGDEALTIME: 0.12},'
				+ '{EVENT_CLASS: "3", NAME_LOCAL: "吸入式读卡器故障", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "3", NAME_LOCAL: "存折补登机故障", WORKTIME: 0.49, NUM: 2, AVGDEALTIME: 0.25},'
				+ '{EVENT_CLASS: "3", NAME_LOCAL: "指纹仪故障", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "3", NAME_LOCAL: "流水打印机故障", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "3", NAME_LOCAL: "磁条阅读器故障", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "4", NAME_LOCAL: "密码键盘故障", WORKTIME: 0.11, NUM: 1, AVGDEALTIME: 0.11},'
				+ '{EVENT_CLASS: "4", NAME_LOCAL: "设备暂停服务", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "4", NAME_LOCAL: "设备离线模式", WORKTIME: null, NUM: null, AVGDEALTIME: null},'
				+ '{EVENT_CLASS: "4", NAME_LOCAL: "通讯中断", WORKTIME: 28.67, NUM: 2, AVGDEALTIME: 14.33}]'
		var tableObj = document.getElementById("itemTable");
		var msgArray = eval(str);
		for(var index in msgArray){
			tableObj.innerHTML += "<tr class='tr-old'><td>"+msgArray[index]["NAME_LOCAL"]+"</td><td>"+msgArray[index]["WORKTIME"]+"</td><td>"+msgArray[index]["NUM"]+"</td></tr>"
		}
		var value = msgArray[0]["EVENT_CLASS"];
		console.log(tableObj)
		var trArray = document.querySelectorAll(".tr-old");
		for(var index in msgArray){
			if(value != msgArray[index]["EVENT_CLASS"]){
				var trObj = document.createElement("tr");
				trObj.innerHTML = "<tr><td>总汇</td><td>---</td></tr>";
				tableObj.insertBefore(trObj,trArray[index]);
				
			}
			value = msgArray[index]["EVENT_CLASS"];
			
		}
	</script>
</html>